<style lang="less">
    @import "../../styles/common.less";
</style>

<template>
    <div>
        <div>
            <span class="setting-title margin-top-10 margin-left-10">考勤时间设置</span>
            <div class="line-gray-1px margin-top-10 margin-bottom-10"/>
            <div class="margin-left-10">
                <Row class="margin-top-10" align="middle" type="flex">
                    <Col><p class="notwrap">上班时间</p></Col>
                    <Col class="margin-left-10">
                    <TimePicker format="HH:mm" placeholder="时间选择" style="width: 100px" v-model="config.work_on"></TimePicker>
                    </Col>
                    <Col class="margin-left-10">晚于 <InputNumber v-model="config.work_on_limit" style="width: 60px" :min="0" :max="59"></InputNumber> 分钟为迟到
                    </Col>
                </Row>
                <Row class="margin-top-10" align="middle" type="flex">
                    <Col><p class="notwrap">下班时间</p></Col>
                    <Col class="margin-left-10">
                    <TimePicker v-model="config.work_off" format="HH:mm" placeholder="时间选择" style="width: 100px"></TimePicker>
                    </Col>
                    <Col class="margin-left-10">早于
                        <InputNumber v-model="config.work_off_limit" style="width: 60px" :min="0" :max="59"></InputNumber> 分钟为早退
                    </Col>
                </Row>
                <Row class="margin-top-20">
                    <Button type="primary" @click="handleSubmit">保存</Button>
                </Row>
            </div>
        </div>
    </div>
</template>

<script>
    import Utils from '@/libs/util';
    import ME from '@/controllers/guardTimeSetting'
    import DateUtils from "../../../node_modules/iview/src/utils/date"
    export default {
        components: {},
        data() {
            return {
                config:{
                    work_on:"0900",
                    work_on_limit:0,
                    work_off:"1700",
                    work_off_limit:0
                }
            }
        },
        created(){
            this.loadConfig()
        },
        methods: {
            loadConfig(){
                ME.getTimeConfig().then(json=>{
                    if(json.code == 0){
                        this.config = json.data
                    }
                })
            },
            handleSubmit(){
                let data = {
                    type:2,
                    value:{
                        work_on:DateUtils.format(this.config.work_on,"HHmm"),
                        work_off:DateUtils.format(this.config.work_off,"HHmm"),
                        work_on_limit:this.config.work_on_limit,
                        work_off_limit:this.config.work_off_limit,
                    }
                }
                ME.setTimeConfig(data).then(json=>{
                    if(json.code == 0){
                        this.$Message.success("更新成功")
                        this.loadConfig()
                    }
                })
            }
        }
    }
</script>
